<template>
  <div>
    <p class="itemP1">
      <span>设置主题</span>
      <svg class="icon iconbf" aria-hidden="true" @click="fatherValue">
        <use xlink:href="#icon-test183"></use>
      </svg>
    </p>
    <div class="iteamDiv5">
      <p>主题色</p>
      <div class="itemThemeStyl">
        <span
          v-for="(list,index) in itemColor"
          :key="index"
          :data-themeColor="list"
          :style="{backgroundColor:list}"
          @click="clickSpan"
        >
          <template v-if="list===defoultItemColor">
            <svg class="icon" aria-hidden="true" @click="fatherValue">
              <use xlink:href="#icon-test332"></use>
            </svg>
          </template>
        </span>
      </div>
    </div>
    <div class="iteamDiv6">
      <p>品牌logo</p>
      <span>
        大logo
        <p>（建议尺寸：100px*40px，白色，png格式）</p>
      </span>
      <span>
        小logo
        <p>（建议尺寸：40px*40px，白色，png格式）</p>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      closeVal: true,
      defoultItemColor: '#20ADE5',
      itemColor: [
        '#EB382F',
        '#FB6321',
        '#CD5511',
        '#DBAF58',
        '#FAB414',
        '#23982D',
        '#F566D3',
        '#C38CFA',
        '#1C69E6',
        '#20ADE5',
        '#0EC2B9',
        '#1B1B1B'
      ]
    }
  },
  methods: {
    fatherValue () {
      this.$emit('childByValue', this.closeVal)
    },
    clickSpan (event) {
      // console.log(event.target.getAttribute('data-themeColor'))
      this.defoultItemColor = event.target.getAttribute('data-themeColor')
      this.$emit('childByiteamColor', this.defoultItemColor)
    }
  }
}
</script>

<style lang="scss" scoped>
.itemP1 {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #e3e3e3;
  text-align: center;
  line-height: 50px;
  color: #000000;
  font-size: 14px;
  font-weight: bold;
}
.iteamDiv5 {
  border-bottom: 1px solid #e3e3e3;
  padding: 10px 0;
}
.iteamDiv5 > p {
  margin-left: 15px;
  width: 100%;
  height: 30px;
  line-height: 30px;
  color: #333333;
  font-size: 14px;
  font-weight: bold;
}
.iconbf {
  position: absolute;
  right: 18px;
  top: 20px;
  width: 10px !important;
  height: 10px !important;
}
.itemThemeStyl {
  width: 308px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.itemThemeStyl > span {
  margin: 5px 6px;
  width: 32px;
  height: 32px;
  border-radius: 5px;
  text-align: center;
  line-height: 32px;
}
.iteamDiv6 {
  border-bottom: 1px solid #e3e3e3;
  padding: 10px 0;
}
.iteamDiv6 > p {
  margin-left: 15px;
  width: 100%;
  height: 30px;
  line-height: 30px;
  color: #333333;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.iteamDiv6 > span {
  color: #333333;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.iteamDiv6 > span > p {
  color: #999999;
  font-weight: normal;
}
</style>
